首先介紹一位大大, 線上reactjs 讀書會首發攻略就是 jason大大 所提供的github,就像是設下關卡讓我們這群reactjs菜鳥去攻略,並且有安排好順序不會讓一下子就遇到等級太高的BOSS(並且貼心的附上攻略本)在此再次感謝jason大大,以下是todolist 學習github連結

https://github.com/shiningjason1989/react-quick-tutorial (大家快去給星^__^)

另外介紹reactjs攻略入門的是經驗豐富的 allen大大 的一口氣攻略 jason大 4個章節的讀書會主講影片檔案如下

https://www.youtube.com/watch?v=C8R8R1tbb_w

攻略項目

Level 01. 用元件思維設計應用程式
這篇要理解的是,要以新的想法去學習react,把所有的東西元件化,元件切割可以參考影片中allen大大詳細的讀書會分享與建議

Level 02. 建置簡易的開發環境
1.建議使用影片中沒有的 vscode來當作開發IDE,之後會介紹到vscode的使用方法與一些好處
2.環境開發會用nodejs,需要npm來管理package也就是reactjs套件等等,更進一步要安裝nvm來控制nodejs版本,方便nodejs版本切換測試
3.安裝一個 live-server( 本機端 純 html server ),快速檢視Reactjs

安裝方法 npm install live-server -g 即可要使用時就到該目錄底下 直接下指令 live-server即可

Level 03. 使用 JSX 印出 hello, world
請先看完影片後,這邊是重點整理與注意事項
1.body中要有個對應可以讓JSX要render的對象例如

     <div id="app"></div> 

這邊id="app" 名稱並非固定但要與第四項相呼應
2.引入cdn的連結
3.注意 type 為 text/babel

    <script type="text/babel" > 

4.對應到第一項的app名稱

        ReactDOM.render(
        <div>hello, world</div>,       // 注意要使用<div>包起來
        document.getElementById('app') // 對應到第一項的app名稱
        ); 

5.至於更多JsX的用法可以參考jason大大的 github 中的教學
https://github.com/shiningjason1989/react-quick-tutorial/tree/master/level-03_hello-react

Level 04. 完成第一個 React 元件
請先看完影片後,這邊是重點整理與注意事項
1.單獨建立一個js檔案,裡面用 class TodoApp extends React.Component{...}
2.中間....程式碼格式為固定要 render() { return 要用div歐 ; }
3.因為這邊範例沒有用common.js 所以不能用 export管理模組這邊直接把Component掛到 window.app.TodoApp底下,至於common.js 之後會在介紹
4.最後再回到index.html底下宣告一個空物件

<script>window.App = {}</script>

5.記得掛入建好的Component掛到

<script type="text/babel" src="./TodoApp.js"></script> 

6.第一次看到這是....es6 出現

const { TodoApp } = window.App; //這個是es6 的寫法 es5就等於 window.App.TodoApp的意思

7.掛入元件

ReactDOM.render(
<TodoApp />, // 這邊就可以使用元件掛入了
document.getElementById('app')
);

以上是心得整理部分,Allen大大影片中都講解得非常詳細,jason的github中也寫得很詳細,以上是polo在線上reactjs讀書會 後 在整理出一些知識點供大家攻略時輔助更容易理解的文字敘述

攻略完本篇Reactjs基本就 可以開始使用基本的React 元件了,下一篇介紹 vscode 之後再繼續入門reactjs嚕

如有誤刊在麻煩大大們指正了 ＾＾

在it鐵人賽中,線上讀書會12月也是天天都精彩歐 下面有連結這整個月的活動表
https://goo.gl/CK1ibc
也可以到粉絲團https://www.facebook.com/readbook999/ 點選全系列連結選喜歡的線上讀書會加入